<template>
	<view class="container">
		<view class="header-bar">
			<view class="search-bar">
				<uni-search-bar
					@confirm="search"
					:focus="true"
					@blur="showHistory = false"
					@focus="showHistory = true"
					v-model="searchValue"
					cancelButton="none"
				>
				</uni-search-bar>
			</view>
			<view class="cancle" @click="cancel">取消</view>
		</view>

		<view v-if="showHistory"> </view>
		<view class="list-box" v-else>
			<scroll-view :style="{height: `${windowHeight}px`}" scroll-y="true" :refresher-triggered="triggered"
				lower-threshold="45" upper-threshold="100" @scrolltoupper="onScrolltoupper"
				@scrolltolower="onScrolltolower" @refresherrefresh="onRefresh">
				<view class="content-list">
					<view class="list-item" v-for="item in list" :key="item.date_time_int">
						<view class="list-item-item title">{{item.name}}</view>

						<view class="list-item-item two-col">
							<view>{{item.zq}}</view>
							<view class="">{{item.zdjs}}</view>
							<view>{{item.strategy_id}}</view>
							<view class="">{{item.industry_name}}</view>
						</view>

						<view class="list-item-item">{{item.tip}}</view>
						<view class="list-item-item two-col">
							<view>{{item.date_time}}</view>
							<view class="time">{{item.current_time}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import { formatDate } from "../../utils/common";
const app = getApp();
export default {
	data() {
		return {
			showHistory: true,
			historyList: [],      
			cameraIndexs: [],
			cameraList: [],
			searchValue: "",
			type: "全部",
			total: 0,
			current: 1,
			size: 10,
			list: [],
			isGroups: false,
      windowHeight:100,
      userName: "",
		};
	},
	mounted(data) {
    console.log("mounted", data)
		this.init();
	},
	onLoad(data) {
    console.log("onLoad", data)
    this.isGroups = data.isGroups;
    this.userName = data.userName;
		if (this.windowHeight == 100) {
				this.windowHeight = uni.getSystemInfoSync().windowHeight - 36 - 52;
			}
	},
	onShow() {
		
	},
	onHide() {
		this.list.splice(0);
	},
	methods: {
		init() {},
		search() {
      this.showHistory = false;
      this.list.splice(0);
			this.scroll = -1;
      this.maxTime = this.formatDate(new Date());
      this.minTime = this.maxTime;
      this.getList();
    },
    async getList() {
        this.loading = true;
				uni.showLoading({
					title: "加载中",
				});
				uni.request({
					url: `${this.$httpApi}/api/scrollMsg`,
					method: "post",
					data: {
						checkPoint: this.scroll === -1 ? this.minTime : this.maxTime,
						scroll: this.scroll,
						pageSize: 10,
						keywords: "",
						username: this.myContactList[this.index].name,
					},
					success: (data) => {
						const res = data.data.data;
						if (res.items.length > 0) {

							if (this.scroll == -1) {
								// 倒序
								res.items.reverse();
								this.list.unshift(...res.items);
								this.minTime = this.list[0].date_time_int;
                this.maxTime = this.list[this.list.length - 1].date_time_int;
							} else {
								this.list.push(...res.items);
                this.minTime = this.list[0].date_time_int;
								this.maxTime = this.list[this.list.length - 1].date_time_int;
							}
						}
            this.loading = false
					},
          fail:()=>{
            this.loading = false
          },
					complete: () => {
						uni.hideLoading();
					},
				});
			},
		cancel() {
			uni.navigateBack();
		},
		isGroupChange(e) {
			this.isGroup = e.detail.value;
		},

		getHistory() {
			uni.getStorage({
				key: "history",
				success: (option) => {
					this.historyList = option.data;
				},
			});
		},
		setHistory() {
			if (this.historyList.length > 9) {
				this.historyList.pop();
			}
			this.historyList.unshift(this.searchValue);
			uni.setStorage({
				key: "history",
				data: this.historyList,
				success: () => {},
			});
		},
	},
};
</script>
<style>
page {
	background-color: #ffffff;
}

.container29914 {
	padding-left: 0px;
	padding-right: 0px;
}
.header-bar {
	display: flex;
	padding: 0 20rpx;
	align-items: center;
}

.header-bar .cancle {
	font-size: 26rpx;
	color: coral;
}

.search-bar {
	flex: 1 1 auto;
}

.type-select {
	width: 80rpx;
	font-size: 24rpx;
	text-align: center;
}

.search-box {
	flex: 1 1 auto;
}

.group {
	padding: 0 40rpx;
	display: flex;
	justify-content: space-between;
}
</style>
